<template>
  <div class="endProess">
    <el-dialog
      title="请选择结案原因"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      center
      width="40%">
      <el-form label-position="left" :model="reasonForm" :rules="rules" ref="ruleForm" label-width="150px" >
        <el-form-item label="结案原因："  prop="reason">
          <el-select v-model="reasonForm.reason" placeholder="请选择结案原因">
            <el-option label="案件重复提交" value="案件重复提交"></el-option>
            <el-option label="案件技术重复" value="案件技术重复"></el-option>
            <el-option label="其他" value="其他"></el-option>
          </el-select>
         </el-form-item>
        <el-form-item label="其他结案原因：" prop="otherReason" v-if="getOtherReason" >
          <el-input v-model="reasonForm.otherReason"  placeholder="请输入其他结案原因"></el-input>
        </el-form-item>


        <el-upload class="upload-demo" ref="upload" :auto-upload="false" :on-change="handleChange"
        :action="baseUrl + 'api/order/' + id + '/end'"
        :file-list="fileList" :http-request="uploadSectionFile" :on-remove="handleRemove" multiple :limit="5">
          <div slot="tip" class="el-upload__tip">文件不要超过100MB</div>
          <el-button v-no-more-click:3000 slot="trigger" size="medium" type="primary" class='mt20'>选择对比文件</el-button>
        </el-upload>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" v-no-more-click:3000>取 消</el-button>
        <el-button type="primary" @click="closeProcess('ruleForm')" v-no-more-click:3000>确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
// import {closeOrder} from "~/api/order"
import axios from "axios"
export default {
  data () {
    return {
      dialogVisible: false,
      reasonForm: {
        reason: '',
        otherReason: ''
      },
      baseUrl: global.baseurl,
      rules: {
        reason: [
          { required: true, message: '请选择结案原因', trigger: 'change' }
        ],
        otherReason: [
          { required: true, message: '请输入其他结案原因', trigger: 'blur' },
        ]
      },
      fileListV: [],
      fileList: [],
      id: null
    }
  },
  computed: {
    getOtherReason () {
      if (this.reasonForm.reason == '其他') {
        return true
      } else {
        return false
      }
    }
  },
  methods: {
    show (data) {
      this.id = data
      this.dialogVisible = true
    },
    closeProcess (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.sumbitPost()
          } else {
            return false;
          }
        })
    },
    sumbitPost () {
      let reason = ''
      // let list = document.getElementsByClassName(
      //   "el-upload-list__item is-ready"
      // );

      // if (list.length == 0) {
      //   this.$message({
      //     type: "warning",
      //     message: "请选择需要发送的文件！"
      //   });
      //   return;
      // }

      // FormData 对象
      var formData = new FormData();
      // 文件对象
      for (let i in this.fileListV) {
        formData.append(i==0?"compare_file":("compare_file"+(i*1+1)), this.fileListV[i].raw);
        // formData.append('compare_file', this.fileListV[0].raw);
      }
      if (this.getOtherReason) {
        reason = this.reasonForm.otherReason
      } else {
        reason = this.reasonForm.reason
      }

      formData.append('order', this.id)
      formData.append('reason', reason)

      axios({
        method: "post",
        url: this.baseUrl + '/api/order/' + this.id + '/end',
        data: formData,
        headers: {
          "Content-Type": "application/json;charset=UTF-8",
          Authorization: "Bearer " + this.$store.state.token
        }
      }).then( res => {
        if (res.data.code == 200) {
          this.$message.success("已成功结束流程")
          this.$emit("refresh")
          this.$refs['ruleForm'].resetFields()
          this.handleClose()
          this.fileList = []
          this.fileListV = []
        } else {
          this.$message.error('结束失败，该订单无法结束流程！');
          this.fileList = []
        }
      }).catch( error => {
        this.$message.error(error);
      })
    },
    handleClose () {
      this.dialogVisible = false
      this.reason = ''
      this.$refs['ruleForm'].resetFields()
    },
    handleChange(file, fileList) {
      this.fileListV = fileList
    },
    handleRemove(file, fileList) {
      this.fileListV = fileList;
    },
    uploadSectionFile(){
    },
  }
}
</script>

<style lang='less' >
  .endProess {
    .el-select {
      width: 100%;
      // margin-bottom: 20px;
    }
    .el-form-item {
      margin-bottom: 10px;
    }
  }
</style>
